<template>

		<view class="cart_item">
			<view class="checkbox" v-if="isEdit">
				<radio :checked="data.isChecked"  @click="radioChange" />
			</view>
			<view class="product_info">
				<view class="cart_img">
					<image :src="data.imgUrl" mode=""></image>
				</view>

				<view class="info_box">
					<view class="title">
					{{data.title}}
					</view>
					<view>
						<view class="spec">
							{{data.skuName}}
						</view>
						<view class="price_count">
							<text class="price">￥{{data.skuPrice.toFixed(2)}}</text>
							<slot></slot>
						</view>
					</view>
				</view>
			</view>
		</view>

</template>

<script>
	export default {
		props:{
			data:{
				type:Object,
				default:()=>{{}}
			},
			isEdit:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {

			}
		},
		methods: {
			// 切换选中
			radioChange() {
				this.data.isChecked = !this.data.isChecked
				 this.$emit('update', this.data);
				console.log("我变了", this.data.isChecked)
			}
		}
	}
</script>

<style lang="scss">
	.cart_item {
		display: flex;
		align-items: center;
		padding: 20rpx 40rpx;
		/* #ifdef MP-WEIXIN */
		margin-top: 86rpx;
		height: 9%;
		/* #endif */


		.checkbox {
			padding-right: 14rpx;
		}

		.product_info {
			flex: 1;
			display: flex;

			.cart_img {
				margin-right: 20rpx;
				width: 200rpx;
				height: 200rpx;
				background-color: #e9b564;
				border-radius: 12rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info_box {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					@include ell-mline();
					word-break: break-all;
				}

				.spec {
					@include ell-mline(1);
					padding: 10rpx;
					color: #a0a0a1;
					font-size: 26rpx;
				}

				.price_count {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.price {
						font-size: 28rpx;
						color: #ff6e0e;
					}

					
				}
			}
		}
	}
</style>